<template>
	<div class="container">
		<div class="wrapper">
			<div class="head">
				<span>搜索客户</span>
			</div>
			<div class="from">
				<el-form ref="form" :model="form" label-width="150px" class="demo-dynamic">
					<el-form-item label="客户编号" prop="cnumber">
						<el-col :span="16">
							<el-input v-model="form.cnumber" placeholder="请输入客户编号" size="small"></el-input>
						</el-col>
					</el-form-item>
					<el-form-item label="客户名称" prop="name">
						<el-col :span="16">
							<el-input v-model="form.name" placeholder="请输入客户名称" size="small"></el-input>
						</el-col>
					</el-form-item>
					<el-form-item label="国家" prop="country">
						<el-select v-model="form.country" placeholder="请选择" size="small">
							<el-option v-for="item in odata.country" :label="item[1]" :value="item[1]" :key="item[0]"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="省份" prop="province">
						<el-select v-model="form.province" placeholder="请选择" size="small">
							<el-option v-for="item in odata.province" :label="item.name" :value="item.name" :key="item.name"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="机构性质" prop="scope">
						<el-select v-model="form.scope" placeholder="请选择" size="small">
							<el-option v-for="item in natureList" :key="item.id" :label="item.property" :value="item.id"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="船舶类型" prop="type">
						<el-select v-model="form.type" placeholder="请选择" size="small">
							<el-option v-for="item in vesselTypeList" :key="item.id" :label="item.type" :value="item.id"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="船舶吨位" prop="tonnage">
						<el-col :span="5">
							<el-input v-model="form.tonnage1" placeholder="单位/吨" size="small"></el-input>
						</el-col>
						<el-col calss="line" :span="2">&nbsp;&nbsp;至</el-col>
						<el-col :span="5">
							<el-input v-model="form.tonnage2" placeholder="单位/吨" size="small"></el-input>
						</el-col>
					</el-form-item>
					<el-form-item label="课程名称" prop="course">
						<el-select v-model="form.course" placeholder="请选择" size="small">
							<el-option v-for="item in courseLists" :key="item.id" :label="item.name" :value="item.id"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="回款状态">
						<el-checkbox-group v-model="form.pay">
							<el-checkbox label="未回款"></el-checkbox>
							<el-checkbox label="已回款"></el-checkbox>
						</el-checkbox-group>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" @click="submitForm('form')">提交</el-button>
						<el-button @click="resetForm('form')">重置</el-button>
					</el-form-item>
				</el-form>
			</div>
		</div>
	</div>
</template>

<script>
import odata from '../../assets/js/data.js'

export default {
	data() {
		return {
			odata: odata,
			form: {
				cnumber: '',
				name: '',
				country: '',
				province: '',
				scope: '',
				type: '',
				tonnage1: '',
				tonnage2: '',
				course: '',
				pay: []
			},
			natureList: [],
			vesselTypeList: [],
			courseLists: [],
		}
	},
	created() {
		this.getNatureList()
		this.getVesselType()
		this.getCourseList()
	},

	methods: {
		submitForm(formName) {
			Lockr.set('customerSearch', this.form)
			router.push('/customer/list')
		},
		resetForm(formName) {
			this.$refs[formName].resetFields();
		},
		getNatureList() {
			this.apiPost('System/getScope').then(res => {
				this.natureList = res
			})
		},
		getVesselType() {
			this.apiPost('System/getVesselType').then(res => {
				this.vesselTypeList = res
			})
		},
		getCourseList() {
			this.apiPost('System/courseLists').then(res => {
				this.courseLists = res
			})
		}
	},


}
</script>

<style scoped>
.container {
	box-sizing: border-box;
	width: 100%;
	min-height: 100%;
	background: #FFFFFF;
}

.wrapper {
	margin: 0 auto;
	padding-top: 20px;
	padding-bottom: 10px;
	width: 600px;
}

.wrapper .head {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 36px;
	background: rgba(1, 119, 191, 0.6);
}

.wrapper .head span {
	font-size: 14px;
	font-family: MicrosoftYaHei;
	color: rgba(255, 255, 255, 1);
}

.wrapper .from {
	padding: 10px;
	border: 1px solid rgba(1, 119, 191, 0.6);
}
</style>